<!--商品列表，可用优惠券商品列表、商品搜索列表使用-->
<script setup lang="ts">
import { linkNavigateTo } from '~/utils/util'
import { toRefs } from 'vue'
import { Mul } from '~/utils/util'
import useOrder from '~/composables/useOrder'
const { handlerProDetailLink } = useOrder()
const props = defineProps({
  //列表数据
  list: {
    type: Array,
    default: [],
  },
  //图片大小
  sizeData: {
    type: Object,
    default: {
      width: '228px',
      height: '228px',
    },
  },
  //是否为热销列表
  isHot: {
    type: Boolean,
    default: false,
  },
})
const { list, sizeData, isHot } = toRefs(props)
/**
 * 地址跳转
 */
const handlerNuxtLink = async (id: number) => {
  await handlerProDetailLink(id, 0)
  // await linkNavigateTo(`/product/detail/${id}`, { type: 'normal' })
}

// 跳入页面
const handleGoPage = (id) => {
  linkNavigateTo(`/merchant/merchant_home`, { merId: id })
}
</script>

<template>
    <div class="acea-row mt-20px">
        <div v-for="item in list" :key="item.id" class="mb15px item cursors">
            <div data-aos="fade-up" data-aos-anchor-placement="top-bottom" @click="handlerNuxtLink(item.id)">
                <div class="w228px borRadius overflow-hidden bg-#FFFFFF" :style="{ width: sizeData.width }">
                    <div class="relative">
                        <div v-show="item.stock===0" class="sellOut">已售罄</div>
                        <el-image class="backImg w228px h228px" :src="item.image" :style="{ width: sizeData.width, height: sizeData.height }"></el-image>
                        <div v-if="item.activityStyle" :style="{ backgroundImage: `url(${item.activityStyle})` }" class="border-picture backImg"></div>
                    </div>
                    <div class="bg-white pt-15px pb-13px px-12px flex flex-justify-between" style="flex-direction: column; margin-top: -5px">
                        <!-- <svip-price :productPrice="item" :priceStyle="{ fontSize: '20px' }" class="mb-8px"></svip-price> -->
                        <div class="mb-16px">
                            <span class="text-12px font-color oppoSans-M">￥</span><span class="text-20px lh-20px font-color dinProSemiBold">{{ item.price }}</span>
                            <span v-if="isHot" class="text-12px text-#999 showRight">已售{{ item.sales }}{{ item.unitName }}</span>
                            <span v-if="!isHot" class="line-through text-14px text-#999 ml-10px dinProRegular font-400">￥{{ item.otPrice }}</span>
                        </div>

                        <!--            <div class="text-12px font-color mb-8px font-500">-->
                        <!--              <span class="oppoSans-M">￥</span-->
                        <!--              ><span class="text-20px lh-20px font-600 dinProSemiBold">{{ item.price }}</span>-->
                        <!--            </div>-->
                        <div class="line2 text-14px fontColor333 mb-12px lh-19px acea-row" :class="!isHot?'h-38px ':''">
                            <div v-if="item.productTags && item.productTags.locationLeftTitle.length" class="inline-block text-12px bg-color text-#fff b-rd-2px py-2px mr-6px px-4px lh-12px">
                                {{ item.productTags.locationLeftTitle[0].tagName }}
                            </div>
                            {{ item.name }}
                        </div>
                        <div v-if="!isHot" class="flex mb-10px h-16px">
                            <!-- <div class="text-12px text-#999 mr-10px">
                                <text v-if="Math.floor(item.replyNum) > 0">{{ item.replyNum }}条评论</text>
                                <text v-if="item.replyNum === 0 || !item.replyNum">暂无评论</text>
                                <text v-if="item.positiveRatio && Number(item.positiveRatio) > 0" class="ml-2px">好评{{ Mul(item.positiveRatio, 100) }}%</text>
                            </div> -->
                            <div class="text-12px text-#999">已售{{ item.sales }}{{ item.unitName }}</div>
                        </div>
                        <div v-if="item.productTags && item.productTags.locationUnderTitle.length" class="h-20px mb-10px">
                            <div v-if="item.productTags && item.productTags.locationUnderTitle.length" class="acea-row">
                                <div v-for="items in item.productTags.locationUnderTitle.length > 3
                    ? item.productTags.locationUnderTitle.slice(0, 3)
                    : item.productTags.locationUnderTitle" :key="items.id" class="text-12px lh-12px font-color base-border b-color-#E93323 b-rd-2px px3px py2px mr8px">
                                    {{ items.tagName }}
                                </div>
                            </div>
                        </div>

                        <!-- <div class="cursors acea-row items-center" @click.stop="handleGoPage(item.merId)">
                            <span class="iconfont icon-guanzhudianpu mr-5px text-12px font-color"></span>
                            <span class="text-12px text-#666 line1 w-175px">{{ item.merName }}</span>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.item {
  margin-right: 15px;
  &:nth-child(5n) {
    margin-right: 0;
  }
}
.showRight {
  float: right;
}
</style>
